<%--
  Created by IntelliJ IDEA.
  User: Lenovo
  Date: 2025/6/2
  Time: 19:13
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui@2.8.15/dist/css/layui.min.css">
    <script src="https://cdn.jsdelivr.net/npm/layui@2.8.15/dist/layui.min.js"></script>

    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#1E88E5',
                        secondary: '#42A5F5',
                        accent: '#0D47A1',
                        neutral: '#F5F7FA',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                },
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .bg-gradient-primary {
                background: linear-gradient(135deg, #1E88E5 0%, #0D47A1 100%);
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .card-hover {
                transition: all 0.3s ease;
            }
            .card-hover:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            }
        }
    </style>
</head>
<body class="bg-neutral min-h-screen font-inter">
<!-- 背景装饰 -->
<div class="fixed inset-0 overflow-hidden pointer-events-none z-0">
    <div class="absolute top-0 left-0 w-full h-full bg-gradient-primary opacity-10"></div>
    <div class="absolute top-0 left-0 w-full h-full overflow-hidden">
        <div class="absolute -right-40 -top-40 w-96 h-96 bg-primary/5 rounded-full"></div>
        <div class="absolute -left-20 top-1/3 w-72 h-72 bg-secondary/5 rounded-full"></div>
        <div class="absolute right-1/4 -bottom-20 w-80 h-80 bg-accent/5 rounded-full"></div>
    </div>
</div>

<div class="relative min-h-screen flex items-center justify-center p-4 z-10">
    <div class="w-full max-w-md">
        <!-- 登录卡片 -->
        <div class="bg-white rounded-2xl shadow-xl overflow-hidden card-hover">
            <!-- 卡片头部 -->
            <div class="bg-gradient-primary p-8 text-white text-center">
                <h1 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-shadow mb-2">用户登录</h1>
                <p class="opacity-80">欢迎回来，请登录您的账户</p>
            </div>

            <!-- 登录表单 -->
            <div class="p-8">
                <form class="layui-form" id="loginForm">
                    <!-- 用户名 -->
                    <div class="layui-form-item mb-6">
                        <div class="relative">
                <span class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">
                  <i class="fa fa-user"></i>
                </span>
                            <input type="text" name="username" required lay-verify="required" placeholder="请输入用户名"
                                   class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all">
                        </div>
                    </div>

                    <!-- 密码 -->
                    <div class="layui-form-item mb-6">
                        <div class="relative">
                <span class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">
                  <i class="fa fa-lock"></i>
                </span>
                            <input type="password" name="password" required lay-verify="required" placeholder="请输入密码"
                                   class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all">
                        </div>
                    </div>

                    <!-- 记住密码 -->
                    <div class="layui-form-item mb-6 flex items-center justify-between">
                        <input type="checkbox" name="remember" title="记住密码" lay-skin="primary" checked>
                        <a href="#" class="text-primary hover:text-accent transition-colors text-sm">忘记密码？</a>
                    </div>

                    <!-- 登录按钮 -->
                    <div class="layui-form-item">
                        <button type="button" lay-submit lay-filter="login"
                                class="w-full py-3 bg-primary hover:bg-accent text-white font-medium rounded-lg transition-colors shadow-lg shadow-primary/20">
                            登录
                        </button>
                    </div>
                </form>

                <!-- 分隔线 -->
                <div class="relative my-8">
                    <div class="absolute inset-0 flex items-center">
                        <div class="w-full border-t border-gray-200"></div>
                    </div>
                    <div class="relative flex justify-center text-sm">
                        <span class="px-2 bg-white text-gray-500">其他登录方式</span>
                    </div>
                </div>

                <!-- 社交登录 -->
                <div class="grid grid-cols-3 gap-4 mb-6">
                    <button class="flex items-center justify-center py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
                        <i class="fa fa-weixin text-green-500 text-xl"></i>
                    </button>
                    <button class="flex items-center justify-center py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
                        <i class="fa fa-qq text-blue-400 text-xl"></i>
                    </button>
                    <button class="flex items-center justify-center py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">
                        <i class="fa fa-github text-gray-800 text-xl"></i>
                    </button>
                </div>

                <!-- 注册链接 -->
                <div class="text-center text-sm text-gray-600">
                    还没有账户？ <a href="#" class="text-primary hover:text-accent transition-colors font-medium">立即注册</a>
                </div>
            </div>
        </div>

        <!-- 页脚 -->
        <div class="mt-8 text-center text-gray-500 text-sm">
            <p>© 2025 版权所有</p>
        </div>
    </div>
</div>

<script>
    // layui.use(['form', 'layer'], function(){
    //     var form = layui.form;
    //     var layer = layui.layer;
    //
    //     // 登录表单提交
    //     form.on('submit(login)', function(data){
    //         // 模拟登录请求
    //         layer.msg('登录中，请稍候...', {icon: 16, time: false});
    //
    //         // 模拟异步请求
    //         setTimeout(function(){
    //             layer.closeAll();
    //             layer.msg('登录成功！', {icon: 1});
    //
    //             // 跳转到主页（实际项目中替换为真实跳转逻辑）
    //             setTimeout(function(){
    //                 window.location.href = '#';
    //             }, 1000);
    //         }, 1500);
    //
    //         return false; // 阻止表单跳转
    //     });
    // });
</script>
</body>
</html>

